<template lang="html">
  <div class="">
    <div class="header-info">
      <div class="base-info fl">
        <div class="avatar">
          <el-upload
                  :action="URL.baseURL+'/file/img/upload'"
                  :show-file-list="false"
                  :data="{
                    prefix: 'user/head'
                  }"
                  :headers="{
                    'Authorization': getAuthToken()
                  }"
                  :on-error="handleError"
                  :on-success="avatarSuccess"
                  name="image">
          <img v-if="userInfo" class="avatar-img" :src="URL.PIC+userInfo.avatar"/>
          </el-upload>
        </div>
        <div class="info-desc fl">
          <div class="username">
            <span>
              <span v-if="userInfo" class="nickName">{{userInfo.nickName}}</span>
              <img  class="phone" src="@/assets/images/member/phone.png" v-if="userInfo && !userInfo.mobile" />
              <img class="phone" src="@/assets/images/member/phoneActive.png" v-if="userInfo && userInfo.mobile !=''" />
              <!-- <img class="wechat" src="@/assets/images/member/wechat.png" v-if="!userInfo.openid" />
              <img class="wechat" src="@/assets/images/member/wechatActive.png" v-if="userInfo.openid" /> -->
            </span>
          </div>
          <div class="alter-info">
            <span class="info-list" @click="routeToPath('/member/setup')"><img src="@/assets/images/member/alterInfo.png"/>修改个人信息</span>
            <span class="info-list" @click="routeToPath('/member/invoice')"><img src="@/assets/images/member/invoice.png"/>发票中心</span>
            <span class="info-list" @click="routeToPath('/member/address')"><img src="@/assets/images/member/locate.png"/>收货地址</span>
          </div>
        </div>
      </div>
      <div class="depart-line fl">
        <img src="@/assets/images/member/splitLine.png"/>
      </div>
      <div class="collection-info fl">
        <div @click="routeToPath('/member/collect')" class="collection-product collect-con fl cursor">
          <div class="collect-num">{{productFavorites}}</div>
          <p>收藏的商品</p>
        </div>
        <div class="collection-line"></div>
        <div @click="routeToPath('/member/collectFactory')" class="collection-shop collect-con fl cursor">
          <div class="collect-num">{{factoryFavorites}}</div>
          <p>收藏的云工厂</p>
        </div>
      </div>
    </div>
    <div class="my-order">
      <el-card class="order-box-card">
        <div slot="header" class="my-order-clearfix">
          <span class="card-title">我的订单</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="routeToPath('/member/orders')">全部订单<img src = "@/assets/images/member/arrow.png" style="margin-left:6px;"/></el-button>
        </div>
        <div class="order-icon-box">
          <div  class="text order-item" v-for="o in myOrder">
            <el-badge :value="o.count" class="item" :hidden="o.count==0">
              <img class="order-icon" :src='o.image' @click="routeToPath(o.routePath)"/>
            </el-badge>
            <p>{{o.text}}</p>
          </div>
        </div>

      </el-card>
    </div>
    <div class="my-footprint">
      <el-card class="footprint-box-card">
        <div slot="header" class="my-footprint-clearfix">
          <span class="card-title">我的足迹</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="routeToPath('/member/myFootprint')">查看更多<img src = "@/assets/images/member/arrow.png"/></el-button>
        </div>
        <div v-for="(v,index) in viewHistory" :key="index" class="footprint-item">
          <img :src="URL.PIC+v.mainImgPath" @click="routeToPath('/product/' + v.viewedId)" >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getOrderNum,getFavorites,getViewHistory,saveUserAvatar} from '@/api/member'
export default {
  name: 'MemberMain',
  data() {
    return {
      ideName:'memberCenter',
      viewHistory:[],
      userInfo: null,
      productFavorites:0,
      factoryFavorites:0,
      myOrder:[{
        image:require('@/assets/images/member/obligation.png'),
        text:'待付款',
        routePath:'/member/orders?orderStatus=1'
      },
      {
        image:require('@/assets/images/member/prePost.png'),
        text:'待发货',
        routePath:'/member/orders?orderStatus=2'
      },
      {
        image:require('@/assets/images/member/preReceive.png'),
        text:'待收货',
        routePath:'/member/orders?orderStatus=3'
      },
      {
        image:require('@/assets/images/member/preEvolution.png'),
        text:'待评价',
        routePath:'/member/orders?orderStatus=4'
      },
      // {
      //   image:require('@/assets/images/member/postSale.png'),
      //   text:'售后',
      //   routePath:''
      // },
    ],

    }
  },
  created(){

    this.userInfo = this.getUserInfo()
    console.log(this.userInfo);
    this.getFavorites();
    this.getOrderNum();
    this.getViewHistory();
  },
  methods:{
    handleError(){

    },
    avatarSuccess(file){
      if (file.code == 200) {
        saveUserAvatar({avatarUrl:file.data}).then(res =>{
          if (res.code == 200) {
            this.$message.success('更换头像成功');
            this.userInfo.avatar = file.data;
          }
        })
      }else {
        this.$message.error("更换头像失败,请稍后再试")
      }
    },
    // 获得我的足迹
    getViewHistory(){
      getViewHistory({page:1,size:6}).then(res =>{
        if (res.code == 200 && res.data) {
            var viewHistoryList = [];
            res.data.forEach(item => {
              viewHistoryList = viewHistoryList.concat(item.list)
            })
            this.viewHistory = viewHistoryList;
        }
      })
    },

    // 获得对应收藏的数量
    getFavorites(){
      getFavorites().then(res =>{
        if (res.code==200&&res.data) {
          res.data.forEach(item =>{
            if (item.source == 1) {
              this.productFavorites = item.count;
            }
            if (item.source ==2 ) {
              this.factoryFavorites = item.count;
            }
          })
        }
      })
    },

    // 获得对应订单数量
    getOrderNum(){
      getOrderNum().then(res =>{
        if (res.code == 200) {
          this.myOrder[0].count = res.data.pendingPaymentNum;
          this.myOrder[1].count = res.data.pendingShippedNum;
          this.myOrder[2].count = res.data.pendingReceivedNum;
          this.myOrder[3].count = res.data.pendingEvaluatedNum;
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-info{
  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  float: left;
  width: 995px;
  height: 139px;
  margin-left: 20px;
  margin-top: 20px;
  background-color:#FFF;
  .base-info{
    width: 480px;
    height: 100%;
    .avatar{
      float: left;
      width:80px;
      height:80px;
      border-radius:50%;
      .avatar-img{
        width:80px;
        height:80px;
        border-radius:50%;
      }
      margin: 29px 21px 30px;
    }
    .info-desc{
      float: left;
      width: 290px;
    }
    .username{
      margin-top: 43px ;
      span{
        font-size: 20px;
        color: rgba(51,51,51,1);
        .nickName{
          margin: 0 5px;
          display: inline-block;
          height: 18px;
          vertical-align: 2px;
        }
        img{
          margin: 0 5px;
        }
        .phone{
          width: 14px;
          height: 18px;
        }
        .wechat{
          width: 18px;
          height: 18px;
        }
      }
    }
    .alter-info{
      margin-top: 15px;
      span{
        font-size:14px;
        margin-right: 10px;
        cursor: pointer;
        img{
          width: 12px;
          height: 12px;
          margin: 0 5px;
        }
      }
    }
    .alter-info{
      font-size:14px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(136,136,136,1);
    }
  }
  .depart-line{
    width: 20px;
    img{
      width: 20px;
      height:139px;
    }

  }
  .collection-info{
    width: 480px;
    height: 100%;
    .collect-con{
      width: 158px;
      padding: 15px 40px;
      text-align: center;
      margin-top: 25px;
      color: #888;
      .collect-num{
        color: #255B8B;
        font-size: 20px;
        cursor: pointer;
      }
      p{

      }
    }
    .collection-line{
      width: 1px;
      height: 40px;
      background:  #E8E8E8;
      float: left;
      margin-top: 45px;
    }

  }
}


.el-card__header .card-title{
  width: 63px;
  // height: 16px;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: rgba(51,51,51,1);
}

.my-order .order-box-card{
  float: left;
  width:995px;
  height:216px !important;
  margin-left: 20px;
  margin-top: 20px;
  img{
    // margin-left: 6px;
  }
  .text {
    font-size: 14px;
  }
  .order-icon-box{
    padding: 0 60px;
    margin-top: 38px;
    .order-item {
    // margin-bottom: 18px;
    width: 25%;
    float: left;
    text-align: center;
  }
  }
  .order-icon{
    // width: 45px;
    // float: left;
    cursor: pointer;

  }


  .order-text{
    width: 45px;
    float: left;
    margin: auto 14px 44px 121px;
    span{
      font-size:14px;
      color:rgba(51,51,51,1);
    }
  }

  .my-order-clearfix:before,
  .my-order-clearfix:after {
    display: table;
    content: "";
  }
  .my-order-clearfix:after {
    clear: both
  }

  .order-box-card {
    width: 980px;
  }
}

.my-footprint .footprint-box-card{
  float: left;
  width:995px;
  height:236px;
  margin:19px 0px 20px 20px;
  img{
    margin-left: 6px;
  }
  .text {
    font-size: 14px;
  }

  .footprint-item {
    float: left;
    margin:29px 0px 30px 37px;
    width: 120px;
    height: 120px;
    img{
      width: 120px;
      height: 120px;
      cursor: pointer;
      border-radius: 6px;
    }
  }

  .my-footprint-clearfix:before,
  .my-footprint-clearfix:after {
    display: table;
    content: "";
  }
  .my-footprint-clearfix:after {
    clear: both
  }

  .footprint-box-card {
    width: 980px;
  }
}
</style>

<style lang='scss'>
.el-card__header .el-button--text{
  color: #888888;
}
</style>
